<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Panaderia San Martin</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css" />
<link href="css/style in.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/cssimg.css" rel="stylesheet" type="text/css" media="screen"  />

	<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
  	<script type="text/javascript">
    $(document).ready(function() {
        var cwidth = parseInt($("#container").css("width").replace("px", ""));
        var img_count = $("#img_container").children().length;
        var img_width = $("#img1").width();
        var divider = cwidth / img_count;
        var small_space = (cwidth - img_width) / (img_count - 1);

        // set position
        var cssleft = Array();
        $("#img_container img").each(function(index) {
            cssleft[index] = new Array();
            // set default position
            cssleft[index][0] = (index * divider) - (index * img_width);
            $(this).css("left", cssleft[index][0] + "px");

            // set left position
            cssleft[index][1] = (index * small_space) - (index * img_width);

            // set right position
            var index2 = index;
            if (index2 == 0) {
                index2++;
            }
            cssleft[index][2] = cssleft[index2 - 1][1];
        });

        // image hover 
        $("#img_container img").mouseenter(function() {
            var img_id = parseInt($(this).attr("id").replace("img", "")) - 1;

            if ($(this).attr("id") != "img1") {
                $(this).animate({ 
                    left: cssleft[img_id][1] 
                }, 300);
            }                
            loopNext(this);
            loopPrev(this);
        });

        // image container hover out back to default position
        $("#img_container").mouseleave(function() {
            $("#img_container img").each(function(index) {
                $(this).animate({
                    left: cssleft[index][0]
                }, 300);
            });
        });

        function loopPrev(el) {
            if ($(el).prev().is("img")) {
                var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

                if ($(el).prev().attr("id") != "img1") {
                    $(el).prev().animate({
                        left: cssleft[imgprev_id - 2][1]
                    }, 300);
                }
                loopPrev($(el).prev());
            }
        }

        function loopNext(el) {
            if ($(el).next().is("img")) {
                var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

                $(el).next().animate({
                    left: cssleft[imgnext_id][2]
                }, 300);
                loopNext($(el).next());
            }
        }
    });
	
	 </script>
	 </head>
	 
	 
<body>
	<div id="wrapper">
		<div id="header">
			<div id="logo">
			<img src="images/logo-sm-main.png"/>
			</div>
		</div>
	</div>
	<!-- end #header -->
	<div id="menu">
		<ul>
			<li class="current_page_item"><a href="#">Inicio</a></li>
			<li><a href="construccion.jsp">Historia</a></li>
			<li><a href="construccion.jsp">Ubicaciones</a></li>
			<li><a href="construccion.jsp">Productos</a></li>
			<li><a href="construccion.jsp">Boletin</a></li>
			<li><a href="contacto.jsp">Contacto</a></li>
			<li><a href="login.jsp">Entrar</a></li>
			
			
		</ul>
	</div>
	
<div id="page">
		<div class="post">
			<div id="main a">   
			</div>
<div id="container">
    <div id="img_container">
        <img id="img1" src="img/01.jpg"/>
        <img id="img2" src="img/02.jpg"/>
        <img id="img3" src="img/03.jpg"/>
        <img id="img4" src="img/04.jpg"/>
        <img id="img5" src="img/05.jpg"/>
        <img id="img6" src="img/06.jpg"/>
	<img id="img7" src="img/07.jpg"/>    
	</div>
</div>
</div>
		
	<div id="two-column">
			<div id="column1">			
			
			</div>
		<div id="column2">
				
		</div>
	</div>
	
</div>
<!--
<div id="about">

<h2 class="title">Con&oacute;cen<em><img src="images/slide1.jpg" alt="" width="250" height="166" class="alignleft" /></em>os</h2>
  <p>Las tiendas San Mart&iacute;n brindan lo que buscas: un buen surtido de panes y repostería reci&eacute;n horneada, una l&iacute;nea gourmet de pasteler&iacute;a, un trato amable y c&aacute;lido, un ambiente &uacute;nico y acogedor, y atenci&oacute;n especial al cliente a cualquier hora del d&iacute;a, durante los siete d&iacute;as de la semana y 24 horas al d&iacute;a a trav&eacute;s de nuestra p&aacute;gina web.</p>
  -->
  
  
  
</div>

<div id="about">
		<h2 class="title">Con&oacute;cen<em><img src="images/slide1.jpg" alt="" width="250" height="166" class="alignleft" /></em>os</h2>
  <p>Las tiendas San Mart&iacute;n brindan lo que buscas: un buen surtido de panes y reposter&iacute;a reci&eacute;n horneada, una l&iacute;nea gourmet de pasteler&iacute;a, un trato amable y c&aacute;lido, un ambiente &uacute;nico y acogedor, y atenci&oacute;n especial al cliente a cualquier hora del d&iacute;a, durante los siete d&iacute;as de la semana y 24 horas al d&iacute;a a trav&eacute;s de nuestra p&aacute;gina web.</p>
</div>
</div>
<div id="footer">
	<p>Copyright (c) 2013 San Mart&iacute;n, Todos los derechos reservados. Dise&ntilde;ado por ASI 2. Photos by <a href="http://fotogrph.com/">fotografias</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>